<template>
  <div class="tab flex">
    <router-link tag="div" class="kaho-tab-item flex-1" to="/recommend">
        <span class="kaho-tab-link">推荐</span>
    </router-link>
    <router-link tag="div" class="kaho-tab-item flex-1" to="/singer">
        <span class="kaho-tab-link">歌手</span>
    </router-link>
    <router-link tag="div" class="kaho-tab-item flex-1" to="/rank">
        <span class="kaho-tab-link">排行</span>
    </router-link>
    <router-link tag="div" class="kaho-tab-item flex-1" to="/search">
        <span class="kaho-tab-link">搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Tab'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.tab{
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    .kaho-tab-item{
        text-align: center;
        .kaho-tab-link{
            padding-bottom: 5px;
            color: hsla(0,0%,100%,.5);}
    }
    .kaho-tab-item.router-link-active{
        .kaho-tab-link{
            border-bottom: 2px solid #ffcd32;
            color: #ffcd32;}
    }
}
</style>
